<template>
  <div class="wrap">
    <div class="header">
      <h2>{{ $t("我的余额") }}</h2>
      <Button type="primary" size="small" @click="isShow = true">充值</Button>
    </div>
    <Row class="balance">
      <Col span="6">
        <p class="balance-title">{{ $t("余额(元)") }}</p>
        <p class="balance-count">{{ info.money }}</p>
      </Col>
      <Col span="6">
        <p class="balance-title">{{ $t("积分") }}</p>
        <p class="balance-count">{{ info.integral }}</p>
      </Col>
      <Col span="6">
        <p class="balance-title">{{ $t("银行卡") }}</p>
        <p class="balance-count">{{ info.bankcard_count }}</p>
      </Col>
      <Col span="6">
        <p class="balance-title">{{ $t("优惠券") }}</p>
        <p class="balance-count">{{ info.coupon_count }}</p>
      </Col>
    </Row>
    <Tabs value="name1">
      <TabPane :label="$t('充值记录')" name="name1">
        <Table v-if="rechargeList.length" :columns="columns" :data="rechargeList"></Table>
        <Empty v-if="!rechargeList.length" />
        <Page class="page" :total="total1" show-total show-elevator v-model="current1" :page-size="10" @on-change="getRechargeList" />
      </TabPane>
      <!-- <TabPane :label="$t('收入明细')" name="name2"></TabPane>
      <TabPane :label="$t('支出明细')" name="name3"></TabPane> -->
    </Tabs>
    <Modal
      v-model="isShow"
      title="余额充值"
      :styles="{top: '250px'}"
      @on-ok="confirm"
      :loading="loading">
      <Form ref="form" :model="form" :label-width="100">
        <FormItem :label="$t('充值金额')" prop="price" :rules="[{ required: true, type: 'number', message: $t('请输入充值金额'), trigger: 'blur' }]">
          <InputNumber :min="0" v-model="form.price" />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: 'Balance',

    data () {
      return {
        info: {},
        isShow: false,
        loading: true,
        form: {
          price: 1
        },
        rechargeList: [],
        current1: 1,
        total1: 0
      }
    },

    computed: {
      columns () {
        return [
          {
            title: '金额',
            key: 'order_price'
          },
          {
            width: 280,
            title: '订单号',
            align: 'center',
            key: 'order_number'
          },
          {
            title: '支付状态',
            align: 'center',
            key: 'statusName'
          },
          {
            title: '支付时间',
            align: 'center',
            key: 'create_time'
          }
        ]
      }
    },

    created () {
      this.getInfo()
      this.getRechargeList()
    },

    methods: {
      getInfo () {
				this.$http.getWallet().then(res => {
					if (res.status == 200) {
            this.info = res.data
					}
				})
      },

			getRechargeList(e) {
				this.$http.getRechargeList({
					page: e || this.current1
				}).then(res => {
					if (res.status == 200) {
						this.rechargeList = res.data.map(v => {
              return {
                ...v,
                statusName: v.pay_status === 0 ? '未支付' : '已支付',
                create_time: this.$dayjs(v.create_time * 1000).format('YYYY-MM-DD hh:mm:ss')
              }
            })

            if (res.data.length) {
              this.total1 = res.data[0].count
            }
					}
				})
			},

      confirm () {
        this.loading = true
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$http.getPrePayOrder({
              price: this.form.price
            }).then(res => {
              if (res.status == 200) {
                this.$router.push({
                  path: '/Pay',
                  query:{
                    order_number: res.data.order_number,
                    zsprice: this.form.price,
                    scene: 'recharge'
                  }
                })
              } else {
                this.$Message.error(res.mess)
              }
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.loading = false

            setTimeout(() => {
              this.isLoading = true
            }, 300)
          }
        })
      },

      cancel () {

      }
    }
  }
</script>


<style lang="scss" scoped>
  .wrap{
    padding-bottom: 20px;
  }
  .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 500;
    padding:10px;
    border-bottom: 1px solid #eee;
  }

  .page {
    display: block;
    margin: 30px auto 0;
    text-align: center;
  }

  .balance{
    padding:30px 10px;
    margin-top: 10px;
    &-title{
      color: #999;
      font-size: 14px;
    }
    &-count{
      font-size: 30px;
      font-weight: bold;
      margin-top: 10px;
    }
  }
</style>
